<template>
  <div class="wrap" v-loading="pageLoading">
    <div class="header-btn">
      <div>{{ title }}</div>
      <div>
        <el-button v-if="operateFlag != 'DETAIL'" type="primary" @click="confirm" v-has-permi="['admin:customerLink:add']">确认</el-button>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="g-card" style="padding-bottom: 16px">
      <div class="title-header">基础信息</div>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px" label-position="right"
               style="position: relative">
        <el-form-item label="链接名称:" prop="linkName">
          <div v-if="operateFlag == 'DETAIL'">{{ form.linkName }}</div>
          <el-input v-else v-model="form.linkName" popper-class="minWidth-inp" style="width: 400px"
                    placeholder="请输入链接名称" max="100"></el-input>
        </el-form-item>
        <el-form-item label="关联员工:" style="padding-bottom: 0" required>
          <NormalQrCode ref="normalQrCode" :isChooseQrState="false"
                        :code-opt.sync="codeOpt"
                        :codeInfoList="codeInfoListA" :codeInfo="codeParams"
                        :disabled="operateFlag == 'DETAIL'" @selectedSure="qrCodeConfrim"
                        @deleteSeletedQrcode="deleteSeletedQrcode" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { nameValidate } from "@/utils/validate";
import * as api from '@/api/communityOperating/drainageLink'

export default {
  name: "AddLinkAssistant",
  data() {
    return {
      title: "创建链接",
      operateFlag: '',
      qrCodeForm: {}, // qr组件传值
      editCodeInfo: {},
      form: {
        linkName: "", // 链接名称
      },
      rules: {
        linkName: [
          {
            required: true,
            validator: nameValidate("任务"),
            trigger: "change",
          },
        ],
      },
      codeParams: {
        qrState: '0',
        qrType: '',
        activityName: '',
        codeUrl: '',
        qrId: ''
      },
      codeInfoListA: [
        { id: 1, name: '员工', iconName: 'staff', isShow: true }
      ],
      codeOpt: ['','员工'],
      pageLoading: false,
    };
  },
  created() {
    this.detailLink();
  },
  methods: {
    // 初始化查询
    detailLink() {
      if (this.$route.query.linkId) {
        this.title = this.$route.query.operateFlag == 'EDIT' ? "编辑链接" : "链接详情";
        api.detailLinkAssistant({ id: this.$route.query.linkId }).then((res) => {
          if (res.code === 200) {
            this.form = { ...res.data };
            // 不知道哪个傻蛋设置的编码顺序。。。（1渠道活码 2群活码 3 员工码），组件顺序：1员工码 2渠道活码 3 群活码
            this.codeParams = {
              qrState: '0',
              qrType: 1,
              activityName: res.data?.weUserName || '',
              codeUrl: res.data?.codeUrl || '',
              qrId: res.data?.weUserId || ''
            }
            this.operateFlag = this.$route.query.operateFlag;
          }
        });
      } else {
        this.operateFlag = this.$route.query.operateFlag;
      }
    },
    // 确认
    confirm() {
      console.log(this.form)
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!this.codeParams.activityName) return this.$message.error("请选择二维码！")
          this.pageLoading = true
          // 编辑
          if (this.$route.query.linkId) {
            let obj = {
              linkName: this.form.linkName,
              weUserId: this.codeParams.qrId,
              weUserName: this.codeParams.activityName,
              linkId: this.$route.query.linkId
            }
            api.editLinkAssistant(obj).then((res) => {
              if (res.code === 200) {
                this.$message.success("编辑成功");
                this.goBack();
              }
              this.pageLoading = false
            }).catch(() => {
              this.pageLoading = false
            })
          } else {
            let obj = {
              linkName: this.form.linkName,
              weUserId: this.codeParams.qrId,
              weUserName: this.codeParams.activityName,
            }
            // 新增
            api.addLinkAssistant(obj).then((res) => {
              if (res.code === 200) {
                this.$message.success("创建成功");
                this.goBack();
              }
              this.pageLoading = false
            }).catch(() => {
              this.pageLoading = false
            })
          }
        } else {
          this.$message.error("你还未录入完成，请核对后提交！");
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    // 删除二维码
    deleteSeletedQrcode() {
      this.codeParams.qrType = '';
      this.codeParams.activityName = '';
      this.codeParams.codeUrl = '';
      this.codeParams.qrId = '';
    },
    qrCodeConfrim(data) {
      if (data) {
        this.codeParams = {
          qrState: data.qrState,
          qrType: data.qrType,
          activityName: data.activityName,
          codeUrl: data.qrCode || data.codeUrl,
          qrId: data.qrId
        }
      }
    },
    // 确定选择的素材
    confirmSelectFn(val) {
      this.form.mediaContentDetails = val;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}
</style>
